<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>消息列表 - [[${configs.title}]]</title>
    <link rel="stylesheet" href="/statics/layui-v2.8.15/css/layui.css">
    <link rel="stylesheet" href="/statics/css/admin/common.css">
</head>
<body>
<!-- 内容主体区域 -->
<div class="main-body">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>消息列表</legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select name="mpId" lay-search="" lay-filter="selectCid">
                    <option value="">所有公众号</option>
                    <option th:each="wechat,stat:${wechatList}" th:value="${wechat.mpId}" th:text="${wechat.name}" th:selected="${mpId == wechat.mpId}"></option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="keyword" autocomplete="off" placeholder="请输入关键字" class="layui-input" th:value="${keyword}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="startDate" id="startDate" autocomplete="off" placeholder="请输入开始时间" class="layui-input" th:value="${startDate}">
            </div>
            <div class="layui-input-inline">
                <input type="text"  name="endDate" id="endDate"  autocomplete="off" placeholder="请输结束时间" class="layui-input" th:value="${endDate}">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜 索</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th width="40">序号</th>
            <th>单位</th>
            <th>公众号</th>
            <th>微信用户ID</th>
            <th>消息内容</th>
            <th>发送时间</th>
            <th>管理</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="entries,stat:${pageData.records}">
            <td th:text="${entries['id']}"></td>
            <td th:text="${entries['department']}"></td>
            <td th:text="${entries['mpName']}"></td>
            <td th:text="${entries['wxUserId']}"></td>
            <td th:text="@{${entries['contentDesc']}}"></td>
            <td th:text="${entries['formatCreatedTime']}"></td>
            <td>
                <div id="operate">
                    <a href="javascript:;" class="layui-btn layui-btn-xs" data-method="showDetail" lay-event="showDetail"
                       th:data-wxuserid="${entries['wxUserId']}" th:data-createdtime="${entries['formatCreatedTime']}"><i class="layui-icon">查看</i></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div>
                <a href="/admin/message/export-data" class="layui-btn layui-btn-sm"><i class="layui-icon">导出</i></a>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div id="page" align="right"></div>
        </div>
    </div>
</div>
<script src="/statics/layui-v2.8.15/layui.js"></script>
<script type="text/javascript">
    let module = "wechat", moduleName= "消息", total = [[${pageData.total}]] ,
        page = [[${pageData.current}]], limit = [[${pageData.size}]];
    layui.use(['layer', 'form', 'jquery', 'laydate'], function () {
        let $ = layui.jquery, form = layui.form, layer = layui.layer, laypage = layui.laypage, laydate = layui.laydate;
        laypage.render({
            elem: 'page'
            , count: total
            , limit: limit
            , curr: page
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                if (obj.curr !== page || obj.limit !== limit) {
                    let keyword = $("input[name='keyword']").val(), mpId = $("select[name='mpId']").val(), startDate = $("input[name='startDate']").val(), endDate = $("input[name='endDate']").val();
                    location.href =  '/admin/message?page=' + obj.curr + '&size=' + obj.limit + (mpId ? '&mpId=' + mpId : '') + (keyword ? '&keyword=' + keyword : '') + (startDate ? '&startDate=' + startDate : '') + (endDate ? '&endDate=' + endDate : '');
                }
            }
        });
        form.on('submit(search)', function () {
            let keyword = $("input[name='keyword']").val(), mpId = $("select[name='mpId']").val(), startDate = $("input[name='startDate']").val(), endDate = $("input[name='endDate']").val();
            if (mpId === '' && keyword === '' && startDate === '' && endDate === '') {
                return false;
            }
            location.href =  '/admin/message?keyword=' + keyword + (mpId ? '&mpId=' + mpId : '') + (startDate ? '&startDate=' + startDate : '') + (endDate ? '&endDate=' + endDate : '');
            return false;
        });

        $('#operate a').on('click', function () {
            let othis = $(this), method = othis.data('method');
            if (method === 'showDetail') {
                let wxUserId = othis.data('wxuserid'),
                    startDate = othis.data('createdtime').substr(0, 10) + ' 00:00:00',
                    endDate = othis.data('createdtime').substr(0, 10) + ' 23:59:59';

                $.ajax({
                    type: 'get',
                    url: '/admin/message/day/detail?wxUserId=' + wxUserId + '&startDate=' + startDate + '&endDate=' + endDate,
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 0) {
                            let content = "";
                            result.data.forEach(function (message) {
                                let oneContent = "";
                                switch (message.msgType) {
                                    case 'image':
                                        oneContent = '<br><a href="' +  message.content + '" target="_blank"><img src="' + message.content + '"/></a>';
                                        break;
                                    case 'video':
                                        oneContent = '<br><video controls><source src="' + message.content + '"></video>';
                                        break;
                                    case 'voice':
                                        // oneContent = '<br><audio controls><source src="' + message.content + '"></audio>';
                                        oneContent = '<a href="' +  message.content + '" target="_blank">点击查看音频文件</a>';
                                        break;
                                    case 'text' :
                                        oneContent = message.content;
                                        break;
                                    default:
                                        oneContent = '<a href="' +  message.content + '" target="_blank">点击查看</a>';
                                }
                                content += '<blockquote class="layui-elem-quote">发送时间：' + message.formatCreatedTime + '<br>消息内容：' +  oneContent + '</blockquote>';
                            })
                            showDetail(content);
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                });
            }
        });
        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });
        function showDetail(content) {
            layer.open({
                type: 1, // page 层类型
                area: ['1000px', '600px'],
                title: '消息详情',
                shade: 0.6, // 遮罩透明度
                shadeClose: false, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: '<div class="show-detail">'+content+'</div>'
            });
        }
    });
</script>
<script src="/statics/js/common.js"></script>
</body>
</html>